
.datacontrast{
    background-color: #f1f1f1;
    min-height: 100vh;
    .datacontrast-top{
        overflow: hidden;
        height:450rpx;
        background: linear-gradient(#8279ea,#aaa3f1);
        padding: 0 20rpx;
        // 头像
        .datacontrast-head{
            .info-head {
                height: 154rpx;
                width: 154rpx;
                background-color: #fff;
                border-radius: 50%;
                margin: 40rpx auto 0; 
                box-shadow: inset 0rpx 0rpx 6rpx 2rpx #83d5fc;
                z-index: 10;
                overflow: hidden;
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                image{
                    border-radius: 50%;
                    height: 145rpx;
                    width: 145rpx;
                }
                .info-head-img{
                    border-radius: 50%;
                    height: 154rpx;
                    width: 154rpx;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            }
        }
        .total-change {
            margin-top: 85rpx;
            height: 150rpx;
            background-color: #fff;
            border-radius: 10rpx;
            display: flex;
            align-items: center;
            .total-change-item {
                text-align: center;
                flex: 1;
              .total-change-item-top {
                color: #8279ea;
                font-size: 40rpx;
              }
          
              .total-change-item-bottom {
                  margin-top: 10rpx;
                font-size: 28rpx;
                color: #0d0d0e;
              }
            }
          }
    }
    .datacontrast-bottom {
        margin-top: 20rpx;
        // 变化详细
        .detail-change {
            display: flex;
          .detail-change-item {
            padding:25rpx ;
            background-color: #fbfbfb;
            border-right: 1rpx solid #eaeaea;
            border-bottom: 1rpx solid #eaeaea;
            font-size: 24rpx;
            display: flex;
            align-items: center;
          }
          // 上升
          .up{
            color: #fab050;
          }
          // 下降
          .down{
            color: #8279ea;
          }
          .detail-change-item:nth-child(1){
            flex: 2;
            background-color: #fff;
          }
          .detail-change-item:nth-child(2){
            flex: 3;
          }
          .detail-change-item:nth-child(3){
            flex: 3;
          }
          .detail-change-item:nth-child(4){
            flex: 2;
            border-right: none;
          }
        }
        .detail-change:nth-child(1) {
            display: flex;
            font-weight: bold;
          .detail-change-item {
            padding:25rpx ;
            background-color: #fbfbfb;
            border-right: 1rpx solid #eaeaea;
            border-bottom: 1rpx solid #eaeaea;
            font-size: 24rpx;
            display: flex;
            text-align: center;
            align-items: center;
            justify-content: center;
          }
          .detail-change-item:nth-child(1){
            flex: 2;
            background-color: #fff;
          }
          .detail-change-item:nth-child(2){
            flex: 3;
          }
          .detail-change-item:nth-child(3){
            flex: 3;
          }
          .detail-change-item:nth-child(4){
            flex: 2;
            border-right: none;
          }
        }
      }

}
